{extend name='public/layer_base' /}
{block name='content'}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form class="layui-form" method="post">

                    <div class="layui-form-item">
                        <label for="setting_group_id" class="layui-form-label">
                            所属分组</label>
                        <div class="layui-input-inline">
                            <select name="setting_group_id" id="setting_group_id" lay-verify="" lay-search>
                                <option value="">请选择所属分组</option>
                                {foreach name='setting_group_list' id='item'}
                                <option value="{$item.id}" {if isset($data) &&
                                    $data.setting_group_id==$item.id}selected{/if}>
                                    {$item.name}
                                </option>
                                {/foreach}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input id="name" name="name" value="{$data.name|default=''}" placeholder="请输入名称" type="text"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="description" class="layui-form-label">描述</label>
                        <div class="layui-input-inline">
                            <input id="description" name="description" value="{$data.description|default=''}"
                                placeholder="请输入描述" type="text" class="layui-input">

                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="code" class="layui-form-label"> 代码</label>
                        <div class="layui-input-inline">
                            <input id="code" name="code" value="{$data.code|default=''}" placeholder="请输入代码" type="text"
                                class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">设置配置</label>
                        <div class="layui-input-block">
                            <div class="box">
                                <div class="box-body table-responsive">
                                    <table id="goods" class="table table-hover table-bordered datatable" width="100%">
                                        <thead>
                                            <tr class="input-type">
                                                <th>操作</th>
                                                <th>设置类型</th>
                                                <th>设置名称</th>
                                                <th>设置字段</th>
                                                <th>设置内容</th>
                                                <th>设置选项</th>
                                            </tr>
                                        </thead>
                                        <tbody id="dataBody">
                                            {if isset($data)}
                                            {foreach name='data.content' id='item'}
                                            <tr>
                                                <td>
                                                    <a class="layui-btn layui-bg-blue layui-btn-xs "
                                                        onclick="addNew(this,1)">插入</a>
                                                    <a class="layui-btn layui-btn-xs " onclick="addNew(this,2)">追加</a>
                                                    <a class="layui-btn  layui-bg-red layui-btn-xs"
                                                        onclick="delThis(this,1)">删除</a>
                                                </td>

                                                <td>
                                                    <div class="layui-input-inline">
                                                    <select name="config_type[]" lay-search>
                                                        <option value="text" {if $item.type=='text' }selected{/if}>文本[text] </option>
                                                        <option value="number" {if $item.type=='number' }selected{/if}>数字[number]</option>
                                                        <option value="password" {if $item.type=='password'}selected{/if}>密码[password]</option>
                                                        <option value="mobile" {if $item.type=='mobile' }selected{/if}> 手机号[mobile]  </option>
                                                        <option value="email" {if $item.type=='email' }selected{/if}> 邮箱[email] </option>
                                                        <option value="id_card" {if $item.type=='id_card'}selected{/if}>身份证号[id_card]</option>
                                                        <option value="url" {if $item.type=='url' }selected{/if}>网址[url]</option>
                                                        <option value="ip" {if $item.type=='ip' }selected{/if}>IP地址[ip]</option>
                                                        <option value="textarea" {if $item.type=='textarea'}selected{/if}>文本域[textarea]</option>
                                                        <option value="checkbox" {if $item.type=='checkbox'}selected{/if}>复选[checkbox]</option>
                                                        <option value="switch" {if $item.type=='switch' }selected{/if}>开关[switch]</option>
                                                        <option value="radio" {if $item.type=='radio' }selected{/if}>单选[radio]</option>
                                                        <option value="select" {if $item.type=='select' }selected{/if}>选择列表[select]</option>
                                                        <option value="multi_select" {if $item.type=='multi_select'}selected{/if}>多项选择列表[multi-select]</option>
                                                        <option value="image" {if $item.type=='image' }selected{/if}>图片上传[image]</option>
                                                        <option value="multi_image" {if $item.type=='multi_image'}selected{/if}>多图上传[multi-image]</option>
                                                        <option value="file" {if $item.type=='file' }selected{/if}>文件上传[file]</option>
                                                        <option value="multi_file" {if $item.type=='multi_file'}selected{/if}>多文件上传[multi-file]</option>
                                                        <option value="date" {if $item.type=='date' }selected{/if}>日期[date]</option>
                                                        <option value="date_range" {if $item.type=='date_range'}selected{/if}>日期范围[date-range]</option>
                                                        <option value="datetime" {if $item.type=='datetime'}selected{/if}>日期时间[datetime]</option>
                                                        <option value="datetime_range" {if $item.type=='datetime_range'}selected{/if}>日期时间范围[datetime-range]</option>
                                                        <option value="year" {if $item.type=='year' }selected{/if}>年[year]</option>
                                                        <option value="year_range" {if $item.type=='year_range'}selected{/if}>年范围[year-range]</option>
                                                        <option value="year_month" {if $item.type=='year_month'}selected{/if}>年月[year-month]</option>
                                                        <option value="year_month_range" {if$item.type=='year_month_range' }selected{/if}>年月范围[year-month-range]</option>
                                                        <option value="map" {if $item.type=='map' }selected{/if}>地图选点[map]</option>
                                                        <option value="color" {if $item.type=='color' }selected{/if}>颜色选择[color]</option>
                                                        <option value="icon" {if $item.type=='icon' }selected{/if}>图标选择[icon]</option>
                                                        <option value="editor" {if $item.type=='editor' }selected{/if}>富文本编辑器[editor]</option>
                                                    </select>
                                                    </div>
                                                </td>

                                                <td>
                                                    <div class="layui-input-inline">

                                                        <input class="layui-input" placeholder="名称" value="{$item.name}"
                                                            name="config_name[]">
                                                    </div>
                                                </td>
                                                <td>
                                                    <div class="layui-input-inline">

                                                    <input class="layui-input" placeholder="字段" value="{$item.field}"
                                                        name="config_field[]">
                                                    </div>

                                                </td>

                                                <td>
                                                    <div class="layui-input-inline">

                                                    <input class="layui-input" name="config_content[]"
                                                        value="{$item.content}" placeholder="选项/默认值(默认值为内容或者第一个选项)" />
                                                    </div>

                                                </td>
                                                <td>
                                                    <textarea class="layui-textarea" name="config_option[]"
                                                        placeholder="设置选项(单选，复选，选择列表等需要填写此项。格式为 字段||中文名称+换行符)">{$item.option}</textarea>
                                                </td>
                                            </tr>
                                            {/foreach}
                                            {/if}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label for="sort_number" class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <div class="plus-minus">
                                <input id="sort_number" name="sort_number" value="{$data.sort_number|default='100'}"
                                    placeholder="请输入排序" type="number" data-minvalue="1" autocomplete="off"
                                    class="layui-input num">
                            </div>
                        </div>
                    </div>
                

                    <div class="layui-form-item">
                        <label for="submit" class="layui-form-label"></label>
                        <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                            type="button">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<table>
    <tbody id="data-template" style="display: none">
        <tr>
            <td>
                <a class="layui-btn layui-bg-blue layui-btn-xs" onclick="addNew(this,1)">插入</a>
                <a class="layui-btn layui-btn-xs" onclick="addNew(this,2)">追加</a>
                <a class="layui-btn  layui-bg-red layui-btn-xs" onclick="delThis(this,1)">删除</a>
            </td>
            <td>
                <div class="layui-input-inline">
                <select name="config_type[]" lay-search>
                    <option value="text">文本[text]</option>
                    <option value="number">数字[number]</option>
                    <option value="password">密码[password]</option>
                    <option value="mobile">手机号[mobile]</option>
                    <option value="email">邮箱[email]</option>
                    <option value="id_card">身份证号[id_card]</option>
                    <option value="url">网址[url]</option>
                    <option value="ip">IP地址[ip]</option>
                    <option value="textarea">文本域[textarea]</option>
                    <option value="checkbox">复选[checkbox]</option>
                    <option value="switch">开关[switch]</option>
                    <option value="radio">单选[radio]</option>
                    <option value="select">选择列表[select]</option>
                    <option value="multi_select">多项选择列表[multi-select]</option>
                    <option value="image">图片上传[image]</option>
                    <option value="multi_image">多图上传[multi-image]</option>
                    <option value="file">文件上传[file]</option>
                    <option value="multi_file">多文件上传[multi-file]</option>
                    <option value="date">日期[date]</option>
                    <option value="date_range">日期范围[date-range]</option>
                    <option value="datetime">日期时间[datetime]</option>
                    <option value="datetime_range">日期时间范围[datetime-range]</option>
                    <option value="year">年[year]</option>
                    <option value="year_range">年范围[year-range]</option>
                    <option value="year_month">年月[year-month]</option>
                    <option value="year_month_range">年月范围[year-month-range]</option>
                    <option value="map">地图选点[map]</option>
                    <option value="color">颜色选择[color]</option>
                    <option value="icon">图标选择[icon]</option>
                    <option value="editor">富文本编辑器[editor]</option>
                </select>
                </div>
            </td>
            <td>
                <div class="layui-input-inline">
                <input class="layui-input" placeholder="名称" name="config_name[]">
                </div>
            </td>
            <td>
                <div class="layui-input-inline">
                <input class="layui-input" placeholder="字段" name="config_field[]">
                </div>

            </td>

            <td>
                <div class="layui-input-inline">
                    <input class="layui-input" name="config_content[]" placeholder="选项/默认值(默认值为内容或者第一个选项)" />
                </div>
            </td>
            <td>
                <textarea class="layui-textarea" name="config_option[]"
                    placeholder="设置选项(单选，复选，选择列表等需要填写此项。格式为 字段||中文名称+换行符)"></textarea>
            </td>
        </tr>

    </tbody>
</table>

<script>


    function addNew(obj, type) {
        var template = $('#data-template').html();
        if (obj == null) {
            $("#dataBody").append(template);
        } else {
            if (type === 1) {
                $(obj).parent().parent().before(template);
            } else {
                $(obj).parent().parent().after(template);
            }
        }
        layui.use(['form'], function () {
            var form = layui.form;
            form.render('select');
        });

    }

    function delThis(obj) {
        layer.confirm('您确认删除本行吗？', { title: '删除确认', closeBtn: 1, icon: 3 }, function () {
            $(obj).parent().parent().remove();
            layer.closeAll();
        });
    }
</script>

{if !isset($data)}
<script>
    $(function () {
        addNew(null, 1);
    });
</script>
{/if}

{/block}